<template>
    <div>
        <section class="title">
            <div class="find">
                <div class="clearfix">
                    <div class="col-sm-4 clearfix">
                        <label class="col-sm-3 control-label">创建时间：</label>
                        <div class="col-sm-4">
                            <div class="input-group date">
                                <input type="text" class="form-control pull-right" id="datepicker3" placeholder="YYYY-MM" v-model="timeData.timeStart">
                            </div>
                        </div>
                        <div class="col-sm-1" style="height:34px;line-height:34px">--
                            <!-- <span style="display:inline-block;height:34px;line-height:34px"></span> -->
                        </div>
                        <div class="col-sm-4">
                            <div class="input-group date">
                                <input type="text" class="form-control pull-right" id="datepicker4" placeholder="YYYY-MM" v-model="timeData.timeEnd">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8 clearfix">
                        <div class="col-sm-2 col-sm-offset-1">
                            <button type="button" class="btn btn-primary">查询</button>
                        </div>
                        <div class="col-sm-2 col-sm-offset-7">
                            <button type="button" class="btn btn-primary">导出</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="clearfix">
            <div style="overflow-x: scroll;overflow-y: hidden;white-space: nowrap;">
                <div ref="echartContainer" style="width:1500px; height:500px;margin:0 auto"></div>
            </div>
            <div style="padding:0 200px;">
                <div class="box">
                    <div class="box-body">
                        <table id="example" class="table table-bordered table-hover" style="font-size:14px;text-align:center">
                            <thead style="font-weight:700">
                                <tr>
                                    <td></td>
                                    <td>平均值</td>
                                    <td>最大值</td>
                                    <td>最大值出现时间</td>
                                    <td>最小值</td>
                                    <td>最小值出现时间</td>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- <tr v-if="planList.length==0">
                                <td colspan="999">暂无数据</td>
                                //日期选择
        
                            </tr> -->
                                 <tr>
                                    <td>用水量</td>
                                    <td>{{tableData.yongshui.avgValue}}</td>
                                    <td>{{tableData.yongshui.maxValue}}</td>
                                    <td>{{tableData.yongshui.maxTime}}</td>
                                    <td>{{tableData.yongshui.minValue}}</td>
                                    <td>{{tableData.yongshui.minTime}}</td>
                                </tr>
                                <tr>
                                    <td>排水量</td>
                                    <td>{{tableData.chushui.avgValue}}</td>
                                    <td>{{tableData.chushui.maxValue}}</td>
                                    <td>{{tableData.chushui.maxTime}}</td>
                                    <td>{{tableData.chushui.minValue}}</td>
                                    <td>{{tableData.chushui.minTime}}</td>
                                    
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import utils from "@/utils";

export default {
    data() {
        return {
            timeData: {
                timeStart: utils.getlastMonth()[11],
                timeEnd: utils.getlastMonth()[0],
                userNum: this.$route.query.userNum
            },
            dayList: {
                date: [],
                yongshui: [],
                chushui: []
            },
            tableData: {
                yongshui: {

                },
                chushui: {

                }
            }
        }
    },
    mounted() {
        this.selectDate1()
        this.selectDate2()
        this.select()
    },
    methods: {
        aa() {
            console.log(this.date)
        },
        //日期选择
        selectDate1() {
            $("#datepicker3")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm",
                    startView: 'year',
                    minView: 'year',
                })
                .on("changeDate", ev => {
                    this.timeData.timeStart = ev.target.value;

                });
        },
        selectDate2() {
            $("#datepicker4")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm",
                    startView: 'year',
                    minView: 'year'
                })
                .on("changeDate", ev => {
                    this.timeData.timeEnd = ev.target.value;
                });
        },
        getMonth(callback) {
            this.dayList.date = []
            this.dayList.yongshui = []
            this.dayList.chushui = []
            this.$api.tongji.month(this.timeData).then(res => {
                if (res.success) {
                    // this.dayList = res.data
                    for (let i in res.data.supplyMonth) {
                        this.dayList.date.push(res.data.supplyMonth[i].time)
                    }
                    for (let j in res.data.supplyMonth) {
                        this.dayList.yongshui.push(res.data.supplyMonth[j].supplyMonth)
                    }
                    for (let k in res.data.drainMonth) {
                        this.dayList.chushui.push(res.data.drainMonth[k].drainMonth)
                    }
                    this.tableData.yongshui = res.data.swater;
                    this.tableData.chushui = res.data.dwater;
                    callback()
                }
            });
        },
        //echart图标
        select() {
            let myChart = echarts.init(this.$refs.echartContainer);
            this.getMonth(() => {
                myChart.setOption({
                    title: {
                        // text: '某地区蒸发量和降水量',
                        // subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['用水', '出水']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: this.dayList.date
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '用水',
                            type: 'line',
                            data: this.dayList.yongshui
                        },
                        {
                            name: '出水',
                            type: 'line',
                            data: this.dayList.chushui
                        }
                    ]
                });
            });
        }
    }
}
</script>

<style>
</style>
